<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echars 测试</title>
    <style>
        .echarsBox {
            width: 500px;
            height: 500px;
            background-color: #eee;
            border: 5px solid #fff;
        }
    </style>
</head>

<body>
    <div class="echarsBox" id="echarBox"></div>
    <div class="echarsBox" id="echarBox2"></div>
    <!-- <script src="./js/echarts.js"></script>
     -->
    <script src="../js/echarts.js"></script>

    <script>
        // 示例横向
        var arr = {}
        arr.fhId = 'echarBox' //负荷的id
        arr.fhArr = [{
                name: '10kv金羊线',
                value: '10'
            },
            {
                name: '10kv金海线',
                value: '20'
            },
            {
                name: '10kv金东线',
                value: '30'
            },
            {
                name: '10kv金澳线',
                value: '45'
            },
            {
                name: '10kv金叶线',
                value: '55'
            },
        ]
        initEchartsFh(arr)

        function initEchartsFh(arr) {
            var fhArr = arr.fhArr
            var data1 = [] //可用数据
            var data2 = []
            var data3 = [] //不可用数据
            var data4 = [] //配置项
            for (i in fhArr) {
                data1.push(fhArr[i].value)
                data2.push(fhArr[i].name)
            }
            for (m in data1) {
                data3.push(100 - parseInt(data1[m]))
            }
            var nowNum = 0
            for (n in data1) {
                var nowA = {}
                nowA.value = data1[n] + '%'
                // nowA.xAxis = nowNum
                // nowA.yAxis = 110
                nowA.xAxis = 110
                nowA.yAxis = nowNum
                data4.push(nowA)
                nowNum++
            }
            var myChart = echarts.init(document.getElementById(arr.fhId))
            var option = {
                textStyle: {
                    // fontSize: arr.initHeight,
                    color: '#fff', //字体颜色
                },
                tooltip: {
                    trigger: 'axis',
                    textStyle: {
                        //   fontSize: arr.initHeight,
                        color: '#eee', //字体颜色
                    },
                    formatter: function (params) {
                        return params[0].name + ': ' + params[0].value + '%'
                    },
                },

                grid: {
                    // x: 90,
                    // y: 120,
                    // x2: 60,
                    // y2: 120,
                    x: 120,
                    y: 90,
                    x2: 120,
                    y2: 60,
                }, //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
                yAxis: {
                    // max: 110,
                    // min: 0,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            // fontSize: arr.initHeight,
                        },
                    },
                    data: data2,
                    axisTick: {
                        //x轴刻度线
                        show: false,
                    },
                    splitLine: {
                        //网格线
                        show: false,
                    },
                    axisLine: {
                        //坐标轴线
                        show: false,
                    },
                },
                xAxis: {
                    show: false,
                    max: 110,
                    min: 0,
                },
                series: [{
                        name: '可用',
                        type: 'bar',
                        stack: '使用情况',
                        data: data1,
                        barWidth: 14, //柱图宽度
                        itemStyle: {
                            color: function (params) {
                                var colorList = [
                                    '#C33531',
                                    '#EFE42A',
                                    '#64BD3D',
                                    '#EE9201',
                                    '#29AAE3',
                                    '#B74AE5',
                                    '#0AAF9F',
                                    '#E89589',
                                    '#16A085',
                                    '#4A235A',
                                    '#C39BD3 ',
                                    '#F9E79F',
                                    '#BA4A00',
                                    '#ECF0F1',
                                    '#616A6B',
                                    '#EAF2F8',
                                    '#4A235A',
                                    '#3498DB',
                                ]
                                return colorList[params.dataIndex]
                            },
                            barBorderRadius: [0, 0, 50, 50], // 统一设置四个角的圆角大小
                        },
                        markPoint: {
                            symbol: 'pin', //标记类型
                            symbolSize: 1, //图形大小
                            itemStyle: {
                                normal: {
                                    borderColor: '#fff',
                                    borderWidth: 1, // 标注边线线宽，单位px，默认为1
                                    label: {
                                        show: true,
                                        //   fontSize: arr.initHeight,
                                    },
                                },
                            },
                            data: data4, //配置项
                        },
                    },
                    {
                        name: '不可用',
                        type: 'bar',
                        stack: '使用情况',
                        data: data3,
                        itemStyle: {
                            color: 'rgba(255,255,255,.2)',
                            // barBorderRadius: [50, 50, 0, 0], // 统一设置四个角的圆角大小
                            barBorderRadius: [0, 0, 50, 50], // 统一设置四个角的圆角大小

                        },
                    },
                ],
            }
            myChart.setOption(option)
            chart3 = myChart
            // myChart.on('click', function (params) {
            //   //		//电站负荷闪动
            //   powerLoad('946be6fc249e40a8a63e97e98b1c576d')
            //   alert('负荷点击事件')
            //   console.log(params)
            //   console.log(params.name + ':' + params.value + '%')
            // })
        }
    </script>
</body>

</html>